<template>
  <div class="main-layout ">
    <el-card class="box-card box-card-list card-margin-top" shadow="never">
      <div class="Mypage">
        <div class="left-menu">
          <LeftMenu></LeftMenu>
        </div>
        <div class="right-content">
          <div class="header-breadcrumb">
            <el-breadcrumb :separator-icon="ArrowRight">
              <el-breadcrumb-item @click="goPage(GoPageName.INDEX)">
                <div class="text-middle-up mouse-hover-pointer">首页</div>
              </el-breadcrumb-item>

              <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
                <div class="text-middle-up mouse-hover-pointer">
                  {{ item }}
                </div>
              </el-breadcrumb-item>

            </el-breadcrumb>
          </div>
          <div class="title" v-if="breadcrumbList.includes(GoPageName.PERSONALINFO_ZH)">
            <h1> {{ pageNameShow }}</h1>
          </div>
          <div class="content">
            <component :RouteParams="route?.query" :is="selectedComponent"></component>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import LeftMenu from "./components/leftMenu.vue"
import ReserveManager from "./components/reservManager/index.vue"
import PersonalInfo from "./components/personalInfo/personalInfo.vue"
import RePassword from "./components/personalInfo/rePassword.vue"
import { ref, watch } from "vue";
import router from '@/router'
import { LocationQueryValue, useRoute } from 'vue-router'

import { GoPageName } from "@/enums";
const route = useRoute()

const judgePath = (path: string | LocationQueryValue[] | null) => {
  if (path === GoPageName.RESERVEMANAGER) {
    return ReserveManager
  } else if (path === GoPageName.PERSONALINFO) {
    return PersonalInfo
  } else if (path === GoPageName.REPASSWORD) {
    return RePassword
  }

}
const JudgePageNameShow = (path: string | LocationQueryValue[] | null) => {
  if (path === GoPageName.RESERVEMANAGER) {
    return GoPageName.RESERVEMANAGER_ZH
  } else if (path === GoPageName.PERSONALINFO) {
    return GoPageName.PERSONALINFO_ZH
  } else if (path === GoPageName.REPASSWORD) {
    return GoPageName.REPASSWORD_ZH
  }
} 

const selectedComponent = ref(judgePath(route.params.path)) // 切换组件显示
const breadcrumbList = ref([JudgePageNameShow(route.params.path)])
const pageNameShow = ref(JudgePageNameShow(route.params.path))

watch(
  () => route.params.path,
  (newPath: any) => {
    // 当 route.params.path 发生变化时触发
    selectedComponent.value = judgePath(newPath)
    pageNameShow.value = JudgePageNameShow(newPath)
    if (newPath === GoPageName.REPASSWORD) {
      breadcrumbList.value.push(pageNameShow.value)
    } else {
      breadcrumbList.value = [pageNameShow.value]
    }
  }
);



const goPage = (path: string) => {
  router.push({
    name: path, // 替换为目标路由的名称或路径
  });
}

</script>

<style scoped>
.card-margin-top {
  margin-top: 10px;
}

.Mypage {
  min-height: 750px;
  display: flex;
  justify-content: space-between;
}

.left-menu {
  flex: 1;
  border-right: 1px solid black;
}

.right-content {
  flex: 3;
}

.right-content .header-breadcrumb {
  margin-left: 20px;
}

.right-content .title {
  margin-top: 20px;
}

</style>